<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扇子导航</title>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <style>

        *{
            margin: 0;
            padding: 0;
        }
        a{
            text-decoration: none;
            color: black;
        }
        #canvas{
            background: #000000;
        }
        #nav{
            width: 130px;
            height: 400px;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        #nav li{
            text-align: center;
            width: 130px;
            height: 400px;
            position: absolute;
            background-color: #bbffb3;
            left:0;
            top: 0;
            list-style: none;
            transform-origin: 25px 376px;
            box-shadow: 2px 2px 20px #41b3ba;
            transition: 1s;
        }
        #nav li:nth-of-type(2){
            background-color: #08ba3a;
        }
        #nav li:nth-of-type(3){
            background-color: #69d8ff;
        }
        #nav li:nth-of-type(4){
            background-color: #41b3ba;
        }
        #nav li:nth-of-type(5){
            background-color: #39beff;
        }
        #nav li:nth-of-type(6){
            background-color: #fae1ff;
        }
        #nav li:nth-of-type(7){
            background-color: #ffabdf;
        }
        #nav li:nth-of-type(8){
            background-color: #ffd87c;
        }
        #nav li:nth-of-type(9){
            background-color: #92ff78;
        }
        #nav li:nth-of-type(10){
            background-color: #66acff;
        }
        #nav li:nth-of-type(11){
            background-color: #f2b2ff;
        }
        #nav li:nth-of-type(12){
            background-color: #ffd5c4;
        }
        .fa{
            font-size: 50px;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="" height=""></canvas>
<ul id="nav">
   <!-- <li><a href="index.html"  target="_blank"><i class="fa fa-home"></i><br>扇子</a></li>-->
    <li><a href="photo.html"  target="_blank"><i class="fa fa-home"></i><br>照片</a></li>
    <li><a href="Command.html"  target="_blank"><i class="fa fa-home"></i><br>照片1</a></li>
    <li><a href="xunlei.html"  target="_blank"><i class="fa fa-home"></i><br>迅雷</a></li>
    <li><a href="pop/pop.html"  target="_blank"><i class="fa fa-home"></i><br>弹窗Demo</a></li>
    <li><a href="jidong/index.html"  target="_blank"><i class="fa fa-home"></i><br>京东</a></li>
    <li><i class="fa fa-home"></i></li>
    <li><i class="fa fa-home"></i></li>
    <li><i class="fa fa-home"></i></li>
    <li><i class="fa fa-home"></i></li>
    <li><i class="fa fa-home"></i></li>
    <li><i class="fa fa-home"></i></li>
    <li><i class="fa fa-home"></i></li>
</ul>
<script>
    window.onload=function () {
        var nav=document.getElementById('nav');
        var lis=document.querySelectorAll('li');
        /*封面点击事件*/
        var flag=true;
        lis[lis.length-1].onclick=function () {
            for(var i=0;i<lis.length;i++){
//                0   1    2   3 4 5 6 7 8 9 10 11
//                -90 -75  -60
                var n=i-lis.length/2;
                if(flag){
                    n=n*15;
                }else {
                    n=360;
                }
                lis[i].style.transform='rotate('+n+'deg)';
            }
            flag=!flag;
        };
        /*单个点击事件*/
        for(var i=0;i<lis.length-1;i++){
            lis[i].index=i;
            lis[i].onclick=function () {
                var lefDeg=0;
                var rightDeg=15;
                this.style.transform = 'rotate(' + 0 + 'deg)';
                for(var j=this.index-1;j>=0;j--) {
                    lefDeg-=15;
                    lis[j].style.transform = 'rotate(' + lefDeg + 'deg)';
                }
                for(var j=this.index+1;j<lis.length;j++) {
                    rightDeg+=15;
                    lis[j].style.transform = 'rotate(' + rightDeg + 'deg)';
                }
            }
        }
        var canvas=document.getElementById('canvas');
        var context=canvas.getContext('2d');
        canvas.width=window.innerWidth;
        canvas.height=window.innerHeight;
        var balls=[];
        var  colors=['#ffdbd4','#a1ff8f','#ffc7fd','#92d2ff','#ffafa3'];
        var timer;
        var on=true;
        canvas.onmousemove=function (event) {
            //移动时创建两个圆
            for(var i=0;i<2;i++){
                var ball={
                    x:random(-5,5)+event.clientX,
                    y:random(-5,5)+event.clientY+window.pageYOffset,
                    r:random(5,25),
                    vx:Math.random()-0.5,
                    vy:Math.random()-0.5,
                    color:colors[random(0,colors.length-1)]
                };
                balls.push(ball);
                if(balls.length>300){
                    balls.shift();
                }
            }
            if(on){
                clearInterval(timer);
                timer=setInterval(drawBall,30);
                on=false;
            }
            function drawBall() {
                context.clearRect(0,0,canvas.width,canvas.height);
                for (var i=0;i<balls.length;i++){
                    balls[i].x+=balls[i].vx*8;
                    balls[i].y+=balls[i].vy*8;
                    balls[i].r=balls[i].r*0.94;
                    balls[i].index=i;
                    if(balls[i].r<1){
                        balls.splice(balls[i].index,1);
                        continue;
                    }
                    draw(balls[i]);
                    if(!balls.length){
                        clearInterval(timer);
                        on=true;
                    }
                }
            }
        };


        function draw(ball) {
            context.beginPath();
            context.arc(ball.x,ball.y,ball.r,0,2*Math.PI);
            context.fillStyle=ball.color;
            context.globalCompositeOperation='lighter';
            context.fill();
        }
        function random(min,max) {
            return Math.round(Math.random()*(max-min)+min);
        }
    }
</script>
</body>
</html>